<template>
  <div >
    <div class="searchlist"  v-if="searchtitle">
    <div class="searchlist_title">
      <span @click="back()"><img src="../assets/img/back.png" alt="" /></span>
      <h1>{{searchtitle[0].name}}</h1>
    </div>
    <div class="chance">
      <div class="chancebox">
        <div class="chanceitem">
          <!-- 选中类名 -->
          <!-- <p class="con">全部</p> -->
          <div v-for="item in searchtitle[0].children" :key="item.id">
             <p  :class="{'con':name==item.name}" @click="switchs(item.name)">{{item.name}}</p>
          </div>
         
        </div>
      </div>
      <div class="categoryimg">
         <span><img src="../assets/img/category.png" alt=""></span>
      </div>
    </div>
    <div class="searchlist_content" v-if="newsearch">
       <van-empty description="暂无相关视频" v-show="newsearch.length==0"  /> 
        <div class="box" v-for="item in newsearch" :key="item.id" >
            <!-- "'/songList?id='+item.creativeId" -->
            <router-link tag="div" class="left" :to="'/homeitem?reid='+item.id">
                <div class="time">{{item.duration|playerTime}}</div>
                <div class="cimg"  ></div>
               <span><img :src="item.cover" alt=""></span>
            </router-link>
            <div class="right">
               <p>{{item.title}}</p>
               <h4>播放量{{item.count.count_view|num}}喜欢{{item.count.count_like}}</h4>
               <div class="name">
                 <span :style="{ 'background-image': 'url(' + item.author.userinfo.avatar + ')' }"></span> {{item.author.userinfo.username}}
               </div>
            </div>
        </div>
    </div>
   </div>
    <van-loading size="40px" v-if="flag">加载中...</van-loading>
  </div>
</template>

<script>
import { getSearchlist,getSearchcontent } from "../api/searchlist";
export default {
  data() {
    return {
        searchtitle:null,
        searchcontent:null,
        name:'全部',
        newsearch:null,
        flag:true,
    }
  },
  methods: {
  
     switchs(name){
     this.name=name
    //  console.log(this.name);
     if (this.searchcontent!=null) {
          if (this.name=="全部") {
        this.newsearch=this.searchcontent
     }
     else{
       this.newsearch=this.searchcontent.filter(item=>{
           return  item.categories.some(itemevery=>{
            return  itemevery.sub.category_name==this.name
           })
       })

     }
     }
 
     },
    
    // tab获取头部信息
    getSearchlistFun(){
      getSearchlist().then(data=>{
        this.searchtitle=data.data.category.filter(item=>item.id==this.$route.query.id)
        // console.log(this.searchtitle);
      })
    },
    // 获取内容信息
    getSearchcontentFun(){
        getSearchcontent({category_id:this.$route.query.id}).then(data=>{
            this.searchcontent=data.data.list
            this.newsearch=this.searchcontent
            // console.log(this.newsearch);
        })
    },
    back(){
      this.$router.go(-1)
    }
  },
  created() {
     this.getSearchlistFun()
     this.getSearchcontentFun()
    //  console.log(this.$route.query.id);
  },
  filters:{
     num(value){
         if (value<10000) {
           return value
         }
         let w =value/10000
         return  Number(w).toFixed(1) +'w'
     },
     playerTime(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
         },  
  },
  watch:{
    'searchtitle':function () {
       if (this.searchtitle!=null) {
          this.flag=false
       }
    }
  }
    
}
</script>

<style lang="less" scoped>
 .van-loading{
        position: fixed;
        top: 130px;
        left: 35%;
        z-index: 999;
    }
.searchlist {
   
  background-color: #fff;
  min-height: 100vh;
  .searchlist_title {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 99;
    padding: 10px 0px;
    border: 1px solid #f2f2f2;
      background-color: #fff;
    span {
      display: block;
      position: absolute;
      left: 10px;
      img{
        width: 24px;
      }
    }
    h1 {
      text-align: center;
      font-size: 18px;
    }
  }
  .chance {
    position: fixed;
    width: 100%;
    top: 42px;
    z-index: 99;
    border: 1px solid #f2f2f2;
      background-color: #fff;
    
    .chancebox {
      width: 85%;
     
      .chanceitem {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        padding: 10px 0px;

        p {
          display: inline-block;
          padding: 5px 10px;
          white-space: nowrap;
          font-size: 12px;
          color: gray;
          margin: 0px 5px;
          border-radius: 5px;
          background-color: rgb(247, 247, 247);
        }
        .con{
            color: red;
        }
       
      }
      .chanceitem::-webkit-scrollbar {
        display: none;
      }
    }
    .categoryimg{
        position: absolute;
        right: 10px;
        top: 10px;
        span{
            img{
                width: 25px;
            }
        }
    }
    
}
.searchlist_content{
     width: 90%;
    margin: 0 auto;
    margin-top: 95px;
    
   
    .box{
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        border-bottom: 1px solid #f2f2f2;
     
        align-items: center;
        .left{
            width: 48%;
            position: relative;
            .cimg{
                position: absolute;
                top: 15px;
                left: 15px;
                background-image: url(../assets/img/c.png);
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #6d6464;
                background-size: 60%;
                background-position: 4px 5px;

            }
            .time{
                position: absolute;
                bottom: 8px;
                left: 115px;
                color: #fff;
                font-size: 12px;
            }
        span{
            width: 100%;
            display: block;
            border-radius: 5px;
            overflow: hidden;
            img{
              
              width: 100%;
                height: 100px;
                
            }
        }
        }
        .right{
            width: 48%;
            h4{
                padding: 5px 0px;
                font-size: 10px;
            }
            p{
                font-size: 13px;
                font-weight: 600;
            }
            .name{
                font-size: 12px;
                color: gray;
                line-height: 20px;
                display: flex;
                span{
                    display: inline-block;
                    margin-right: 8px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    // background-image: url(../assets/img/test.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }
    }
   }
  }
 

</style>